<template>
  <div class="anonymity_info">
    <navigate>匿名信息设置</navigate>
    <div class="content_info">
      <div class="white_box mar_top10">
        <div class="form">
          <div class="txt">用户显示头像：</div>
          <input
            type="file"
            id="file_id"
            @change="updateAvatar"
            accept="image/*"
            style="display: none"
          />
          <div class="avatar_box">
            <img :src="form.avatar" alt="" class="avatar_img" />
            <div class="replace_img" @click="updateAvatarOperate">
              <div>更换头像</div>
              <img
                src="@/assets/images/common/right.png"
                alt=""
                class="right-arrow"
              />
            </div>
          </div>
        </div>
        <div class="form">
          <div class="txt">人个呢称设置：</div>
          <input type="text" v-model="form.name" />
        </div>
        <div class="form">
          <div class="txt">个人简介展示：</div>
          <textarea
            name=""
            id=""
            cols="30"
            rows="6"
            placeholder="请输入个人简介"
            v-model="form.desc"
          ></textarea>
        </div>
      </div>

      <div class="single_choice">
        <div class="tit">默认匿名使用</div>
        <div class="white_box">
          <div class="form">
            <div class="txt">我发送时：</div>
            <div>
              <van-radio-group
                shape="square"
                v-model="form.sendName"
                @change="changeSendName"
              >
                <van-radio name="0" checked-color="#00AEFF">使用昵称</van-radio>
                <van-radio name="1" checked-color="#00AEFF"
                  >使用真实姓名</van-radio
                >
              </van-radio-group>
            </div>
          </div>
          <div class="form">
            <div class="txt">我评论时：</div>
            <div>
              <van-radio-group
                v-model="form.reviewName"
                @change="changereviewName"
              >
                <van-radio name="0" checked-color="#00AEFF">使用昵称</van-radio>
                <van-radio name="1" checked-color="#00AEFF"
                  >使用真实姓名</van-radio
                >
              </van-radio-group>
            </div>
          </div>
        </div>
      </div>

      <div class="single_choice">
        <div class="tit">收发记录清理</div>
        <div class="white_box">
          <div class="form">
            <div class="txt">定期清理间隔：</div>
            <div>
              <v-switch :val="form.clearSwitch" @getVal="changeClearSwitch" />
            </div>
          </div>
          <div class="form" v-if="form.clearSwitch">
            <div class="txt">定期清理间隔：</div>
            <div>
              <van-radio-group
                shape="square"
                v-model="form.clearTime"
                @change="changeClearTime"
              >
                <van-radio name="1" checked-color="#00AEFF">一年</van-radio>
                <van-radio name="2" checked-color="#00AEFF">半年</van-radio>
                <van-radio name="3" checked-color="#00AEFF">一个月</van-radio>
              </van-radio-group>
            </div>
          </div>
        </div>
      </div>
      <div class="save_btn" @click="toSave">保存</div>
    </div>
  </div>
</template>

<script>
import { uploadImg } from "@/api/common";
import { getBase64 } from "@/utils/url";
import { mapMutations, mapState } from "vuex";
import { queryTreeConfig, saveTreeConfig } from "@/api/funcation/wisdomTree";
export default {
  data() {
    return {
      checked: true,
      radio: "1",
      activeIcon: require("@/assets/images/function/radio_check.png"),
      inactiveIcon: require("@/assets/images/function/radio_no_check.png"),
      form: {
        clearSwitch: true,
        sendName: "0",
        reviewName: "0",
        clearTime: "1",
      },
    };
  },
  created() {
    this.gteTreeConfig();
  },
  computed: {
    ...mapState(["INFO"]),
  },
  methods: {
    ...mapMutations(["SET_INFO"]),
    // 更换头像
    updateAvatarOperate() {
      document.getElementById("file_id").click();
    },
    async updateAvatar(event) {
      const base64 = await getBase64(event.target.files[0]);
      let res = await uploadImg({ file: base64 });
      if (res.code === 200) {
        this.form.avatar = res.data;
      }
    },
    async gteTreeConfig() {
      let res = await queryTreeConfig();
      if (res.code == 200) {
        this.form = {
          avatar: res.data.avatar,
          name: res.data.nickname,
          desc: res.data.personal_profile,
          sendName: String(res.data.send_is_nickname),
          reviewName: String(res.data.comment_is_nickname),
          clearSwitch: res.data.is_clean,
          clearTime: String(res.data.clean_time),
        };
      }
    },
    //保存
    async toSave() {
      let par = {
        nickname: this.form.name,
        avatar: this.form.avatar,
        personal_profile: this.form.desc,
        send_is_nickname: this.form.sendName,
        comment_is_nickname: this.form.reviewName,
        is_clean: this.form.clearSwitch ? 1 : 0,
        clean_time: this.form.clearTime,
      };
      let res = await saveTreeConfig(par);
      if (res.code == 200) {
        this.SET_INFO({
          ...this.INFO,
          avatar: this.form.avatar,
          name: this.form.name,
        });
        this.$toast.success({ message: "保存成功！" });
        this.$router.push("/wisdomTree");
      }
    },
    changeClearSwitch(e) {
      this.form.clearSwitch = e;
    },
    changeSendName(e) {
      this.form.sendName = e;
    },
    changereviewName(e) {
      this.form.reviewName = e;
    },
    changeClearTime(e) {
      this.form.clearTime = e;
    },
  },
};
</script>

<style lang="less" scoped>
::v-deep .van-radio {
  margin-bottom: 23.33px;
}

::v-deep .van-radio__label {
  font-size: 14px;
  color: #333333;
}

::v-deep .van-radio__icon .van-radio__icon--round .van-radio__icon--checked {
  width: 15.33px;
  height: 15.33px;
}

.img-icon {
  width: 15.33px;
  height: 15.33px;
}

.anonymity_info {
  background-color: #f4f6fa;
  color: #333333;
}

.content_info {
  margin: 10px 10px 0 10px;
}

.white_box {
  background: #ffffff;
  border-radius: 6.67px;
  padding: 0 12px;
  gap: 20px;
}

.form {
  display: flex;
  border-bottom: 1px solid #dddddd;
  font-size: 14.67px;
  padding: 18px 0;
}

.form:last-child {
  border: 0;
}

.form .txt {
  color: #666666;
  min-width: 120px;
  flex-shrink: 0;
}

.form .avatar_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
}

.avatar_box .avatar_img {
  width: 46.67px;
  height: 46.67px;
  border-radius: 50%;
}

.avatar_box .replace_img {
  display: flex;
  align-items: center;
}

.avatar_box .replace_img div {
  opacity: 0.5;
  font-size: 14px;
  line-height: 14px;
}

.avatar_box .replace_img img {
  width: 8px;
  height: 14px;
  margin-left: 10px;
}

.form input {
  width: 60%;
  font-weight: bold;
  border: 0;
}

.form textarea {
  border: none;
}

.form .right-arrow {
  width: 7.67px;
  height: 14px;
}

.footer_box {
  margin-top: 33.33px;
}

.submit_btn {
  width: 333.33px;
  height: 46.67px;
  text-align: center;
  line-height: 46.67px;
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #00aeff;
  border-radius: 6.67px;
  color: #ffffff;
  font-size: 16.67px;
  margin: 0 auto;
}

.agree_info {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 24.33px;
}

.agree_info div {
  font-size: 14px;
  color: #555555;
  margin-left: 6.67px;
}

//单选
.single_choice {
}

.single_choice .tit {
  font-size: 14px;
  line-height: 14px;
  color: #888888;
  margin: 16px 0;
}

.save_btn {
  width: 333.33px;
  height: 46.67px;
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #00aeff;
  border-radius: 6.67px;
  color: #ffffff;
  font-size: 16.67px;
  line-height: 46.67px;
  text-align: center;
  margin: 32px auto;
}
</style>
